第 1 步 - 创建联系人列表并从数据源获取联系人

在教程的这一步骤中，您将首先创建用作联系人列表的网格列表框 (Grid List Box) 节点。然后设置网格列表框 (Grid List Box) 从数据源接收联系人数据。

教程资产

本教程的起点资料是存储在<KanziWorkspace>/Tutorials/List box/Start/Tool_project 目录中的List box.kzproj Kanzi Studio 工程文件。

<KanziWorkspace>/Tutorials/List box/Completed/Tool_project 目录中包含本教程已完成的工程。

起点工程包含完成本教程所需的内容：

• Background 节点设置联系人列表的背景。
  
• ContactItem 预设件定义每个联系人条目的布局。
  • ContactPhoto 节点显示联系人照片。
  • ContactName 节点显示联系人名称。

  您可以在预设件 (Prefabs) 窗口找到 ContactItem 节点。
  

• XML data source 数据源插件，用于从 XML 文件获取联系人条目的数据。此插件使用 ContactsList.xml 文件作为本教程中的联系人条目数据源。您可以在 Application/bin 目录中找到 ContactsList.xml 文件。
  
  建议

  要查看数据源 (Data Sources) 窗口，在 Kanzi Studio 主菜单中选择窗口 (Window) > 数据源 (Data Sources)。

  

创建网格列表框 (Grid List Box)

在本节中，您将创建用于显示联系人列表的网格列表框 (Grid List Box)。

要创建网格列表框 (Grid List Box)：

1. 在 Kanzi Studio 中打开存储在 <KanziWorkspace>/Tutorials/List box/Start/Tool_project 目录中的工程。
2. 在工程 (Project) 中按下 Alt 并右键点击RootPage 节点，选择 2D 网格列表框 (Grid List Box 2D) 并将其命名为 ContactsList。
   
3. 在工程 (Project) 中选择ContactsList 节点，并在属性 (Properties) 中将项模板 (Item Template) 属性设为ContactItem。
   使用项模板 (Item Template) 属性设置您想要网格列表框 (Grid List Box) 节点在其项中使用的预设件模板。
   

从数据源获取项

在本节中，您将使用数据源填充在上一节创建的 ContactsList。

在 Kanzi 中，列表框节点使用虚拟化加载并立即显示要显示的项数。用户滚动列表框时，列表框加载新项并移除不再可见的项。

在 Kanzi Studio 中，您可以手动添加或移除列表框节点中的项。但是，仅对含少数静态项数的列表和原型制作使用该操作。如果您知道列表框中的项数会在应用程序运行时变化，始终使用数据源填充列表框节点。

要从数据源获取列表项：

1. 在工程 (Project) 中选择 ContactsList 节点，在属性 (Properties) 中添加数据上下文 (Data Context) 属性，将其设为 XML data source。
   通过设置数据上下文 (Data Context) 属性，您可以告诉应用程序从哪个数据源接收数据。
   
2. 在主菜单中选择窗口 (Window) > 数据源 (Data Sources)。
   使用数据源 (Data Sources) 窗口管理工程中的数据源。
   
3. 在工程 (Project) 中选择 ContactsList 节点，从数据源 (Data Sources) 窗口拖动 XML data source > contacts 数据对象，并放在属性 (Properties) 中 ContactsList 节点的项源 (Items Source) 属性上。
   项源 (Items Source) 属性设置为 ContactsList 节点显示的项提供数据的源。
   
4. 在预设件 (Prefabs) 的 ContactItem 预设件中选择 ContactPhoto 节点，从数据源 (Data Sources) 窗口拖动 XML data source > contacts > Item > contact > photo 数据对象，并放在属性 (Properties) 中的图像 (Image) 属性上。数据对象为联系人列表中的每个联系人项提供照片。
   在具有单个字段的属性上拖放数据对象时，Kanzi Studio 会创建绑定，将该属性的值绑定到您放在该属性上的数据对象。
   ContactPhoto 节点的图像 (Image) 属性值现在来自 XML data source photo 数据对象。
   
5. 为ContactItem > Container > ContactName 节点重复上一步，但使用 XML data source > contacts > Item > contact > name 数据对象。
   数据对象为联系人列表中的每个联系人项提供名称。
   

ContactsList 节点现在从使用 XML data source 数据源的 ContactsList.xml 接收联系人项的照片和名称。在预览 (Preview) 中，您可以看到联系人数据。

定义列表框内容的布局

在本节中，您将设置 ContactsList 节点和列表项布局，以呈现应用程序中的内容。

要定义列表框内容的布局，在工程 (Project) 中选择 ContactsList 节点并在属性 (Properties) 中设置：

• 单元格宽度 (Cell Width) 为 400
  
• 单元格高度 (Cell Height) 为 45
  您需要设置为列表框内的每个元素保留的区域。如果项不适合单元格，节点会对其进行剪辑。
  
• 布局宽度 (Layout Width) 为 400
• 布局高度 (Layout Height) 为 360
  您需要设置 网格列表框 (Grid List Box) 节点中的项要在哪个区域中可见。如果网格列表框 (Grid List Box) 节点中的所有项并非都适合区域，节点会剪辑不适合的那些项。用户可以滚动 网格列表框 (Grid List Box) 节点以访问所有的项。
• 水平对齐 (Horizontal Alignment) 和垂直对齐 (Vertical Alignment) 为 居中 (Center)
  您可以这样将网格列表框 (Grid List Box) 对齐到应用程序屏幕的中心。
• 垂直边距 (Vertical Margin) 属性上对齐 (Top) 属性字段为 30

预览 (Preview) 现在显示列表框及其项的更新布局。要更改联系人列表中的联系人名称，在文本编辑器中更改 ContactsList.xml 文件中的值，并保存 ContactsList.xml 文件。

设置网格列表框 (Grid List Box) 如何滚动项

在本节中，您将定义网格列表框 (Grid List Box) 如何滚动项，并设置选定项，以移动到网格列表框 (Grid List Box) 区域的中心。

要设置网格列表框 (Grid List Box) 如何滚动项：

1. 在工程 (Project) 中选择 ContactsList 节点，并在属性 (Properties) 中将列表框设置为滚动所选项到节点区域的中心：
   • 选择行为 (Selection Behavior) 属性为移动到中心 (Bring Center)
     网格列表框 (Grid List Box) 将选定的项放到节点区域的中心。
     
   • 项区域开始 (Item Area Begin) 属性设置为 0.45
   • 项区域结束 (Item Area End) 属性设置为 0.45
     设置列表开头和末尾的项，以便在用户选择这些项中的某一个项时使这些项对齐到列表的中心。项区域开始 (Item Area Begin) 和项区域结束 (Item Area End) 属性设置您希望网格列表框 (Grid List Box) 节点中的项的区域在开头和末尾的偏移量。
     
2. 在工程 (Project)中选择 ContactsList节点，在属性 (Properties)中添加并设置滚动灵敏度 (Scroll Sensitivity)属性为 360。
   设置滚动灵敏度 (Scroll Sensitivity) 属性以匹配 ContactsList 节点布局高度 (Layout Height) 属性的值。
   当设置网格列表框 (Grid List Box) 节点的滚动灵敏度 (Scroll Sensitivity) 属性匹配滚动方向的节点布局尺寸时，网格列表框 (Grid List Box) 节点滚动的量和用户拖动指针的量相同。
   

在预览 (Preview) 中，当您选择列表项时，列表框会将该项放在其区域中心。

打开导航